<template>
  <div class="exam-info">
    <div>
      <el-tag> <enum-view :enum-name="'ExamType'" :enum-value="examInfo.examType" /> </el-tag>&nbsp;{{ examInfo.examName }}
      <div v-if="examInfo.examType === 1" class="exam-desc">
        <div>
          有效期：<span v-if="examInfo.validityDateType === 1">长期有效</span>
          <span v-if="examInfo.validityDateType === 2">{{ examInfo.days }}天</span>
          <span v-if="examInfo.validityDateType === 3">{{ examInfo.beginTime }}~{{ examInfo.endTime }}</span>
        </div>
        <div>
          考试次数：<span v-if="examInfo.examCount > 0">最多可考 {{ examInfo.examCount }} 次</span><span v-else>不限次数</span>
        </div>
        <div>
          成绩设置：以
          <enum-view :enum-name="'ExamScoreType'" :enum-value="examInfo.examScoreType" />
          为准
        </div>
      </div>
      <div v-if="examInfo.examType === 2" class="exam-desc">
        <div>报名时间：{{ examInfo.registrationStartTime }} ~ {{ examInfo.registrationEndTime }}</div>
        <div>
          报名限制：<span v-if="examInfo.registrationUserLimitCount > 0">最多允许 {{ examInfo.registrationUserLimitCount }} 人报名</span>
          <span v-else>不限人数</span>
          <span style="margin-left: 20px">开考时间：{{ examInfo.examStartTime }}</span>
        </div>
      </div>
    </div>
    <div>
      <el-button v-permission="'exam:edit'" link type="primary" @click="toExamUpdate()">编辑</el-button>
    </div>
  </div>
  <div style="height: 20px"></div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="考试数据" name="exam">
      <record-exam v-if="activeName === 'exam' && examInfo.id" :exam-type="examInfo.examType" :exam-id="examInfo.id" :period-id="periodId" />
    </el-tab-pane>
    <el-tab-pane v-if="examInfo.price > 0" label="售卖记录" name="order">
      <record-order v-if="activeName === 'order'" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
  import EnumView from '@/components/Enum/View/index.vue'
  import RecordOrder from './Order.vue'
  import RecordExam from './Exam.vue'
  import { onMounted, ref } from 'vue'
  import { examApi } from '@/api/exam'
  import { useRoute, useRouter } from 'vue-router'

  const route = useRoute()
  const router = useRouter()

  const periodId = ref('')

  onMounted(() => {
    // 当为课时考试类型时使用
    periodId.value = route.query.periodId
    // 考试信息
    handleExamInfo()
  })

  // 考试信息
  const examInfo = ref({})
  const handleExamInfo = async () => {
    examInfo.value = await examApi.examView({ id: route.query.examId })
  }

  // 考试编辑
  const toExamUpdate = () => {
    router.push({ path: '/exam/update', query: { examId: route.query.examId } })
  }

  // 切换
  const activeName = ref('exam')
  const handleClick = (target) => {
    activeName.value = target.props.name
  }
</script>
<style lang="scss" scoped>
  .exam-info {
    display: flex;
    justify-content: space-between;

    .exam-desc {
      margin-top: 10px;
      line-height: 25px;
      color: #999;
    }
  }
</style>
